<template>
	<view class="container">
		<!-- 顶部功能框 fangkuang -->
		<view class="fangkuang">
			<view class="function-bar">
				<view class="function-bar">
					<view class="function-item" :class="{active: activeTab === 'replaceCloth'}"
						@click="switchService('replaceCloth')">
						<image src="/static/daohangqu1/change.png"></image>
						<text>更换台尼</text>
					</view>
					<view class="function-item" :class="{active: activeTab === 'disassembleTable'}"
						@click="switchService('disassembleTable')">
						<image src="/static/daohangqu1/table.png"></image>
						<text>拆装球桌</text>
					</view>
					<view class="function-item" :class="{active: activeTab === 'replaceParts'}"
						@click="switchService('replaceParts')">
						<image src="/static/daohangqu1/part.png"></image>
						<text>更换配件</text>
					</view>
					<view class="function-item" :class="{active: activeTab === 'repairCue'}"
						@click="switchService('repairCue')">
						<image src="/static/daohangqu1/repair.png"></image>
						<text>维修球杆</text>
					</view>
					<view class="function-item" :class="{active: activeTab === 'moveRepair'}"
						@click="switchService('moveRepair')">
						<image src="/static/daohangqu1/transport.png"></image>
						<text>搬修服务</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容框 fangkuang2 -->
		<view class="fangkuang2">

			<view class=content-area>



				<!-- 更换台尼 -->
				<view v-if="activeTab === 'replaceCloth'" class='service-content'>
					<!-- 型号选择部分 -->
					<view class="section">
						<text class="section-title">型号与底部铺设</text>

						<!-- 循环渲染多组型号选择 -->
						<view v-for="(modelGroup, index) in modelGroups" :key="'model'+index" class="model-group">
							<view class="model-container">
								<view class="model-selector">
									<text>型号：</text>
									<view class="scroll-container small"><!-- 内部的滚动选择器的容器 -->
										<picker-view class="picker-view" :indicator-style="indicatorStyle"
											@change="(e)=>bindModelChange(e, index)">
											<picker-view-column>
												<view class="picker-item" v-for="(item,i) in models" :key="i">{{item}}
												</view>
											</picker-view-column>
										</picker-view>
									</view>
								</view>

								<view class="bottom-selector" v-if="modelGroup.selectedModel">
									<text>底部：</text>
									<view class="scroll-container small">
										<picker-view class="picker-view" :indicator-style="indicatorStyle"
											@change="(e)=>bindBottomChange(e, index)">
											<picker-view-column>
												<view class="picker-item" v-for="(item,i) in bottoms" :key="i">{{item}}
												</view>
											</picker-view-column>
										</picker-view>
									</view>
								</view>
							</view>

							<view v-if="modelGroup.selectedModel" class="selected-info">
								<view class="info-row">
									<text>已选择型号：{{modelGroup.selectedModel}}</text>
									<text v-if="modelGroup.selectedBottom">底部铺设：{{modelGroup.selectedBottom}}</text>
								</view>
								<view class="quantity-control">
									<view class="minus" @click="decreaseQuantity('modelQuantity', index)">-</view>
									<input v-model="modelGroup.quantity" type="number" placeholder="数量"></input>
									<view class="plus" @click="increaseQuantity('modelQuantity', index)">+</view>
									<view class="delete" @click="deleteModelGroup(index)">删除</view>
								</view>
							</view>
						</view>

						<view class="add-array" @click="addModelGroup">新增型号数组</view>
					</view>

					<!-- 台尼品牌选择部分 -->
					<view class="section">
						<text class="section-title">台尼品牌与底部</text>

						<!-- 循环渲染多组品牌选择 -->
						<view v-for="(brandGroup, index) in brandGroups" :key="'brand'+index" class="brand-group">
							<view class="brand-container">
								<view class="brand-selector">
									<text>品牌：</text>
									<view class="scroll-container small">
										<picker-view class="picker-view" :indicator-style="indicatorStyle"
											@change="(e)=>bindBrandChange(e, index)">
											<picker-view-column>
												<view class="picker-item" v-for="(item,i) in brands" :key="i">{{item}}
												</view>
											</picker-view-column>
										</picker-view>
									</view>
								</view>

								<view class="bottom-cloth-selector" v-if="brandGroup.selectedBrand">
									<text>底部：</text>
									<view class="scroll-container small">
										<picker-view class="picker-view" :indicator-style="indicatorStyle"
											@change="(e)=>bindBottomClothChange(e, index)">
											<picker-view-column>
												<view class="picker-item" v-for="(item,i) in bottomCloths" :key="i">
													{{item}}
												</view>
											</picker-view-column>
										</picker-view>
									</view>
								</view>
							</view>

							<view v-if="brandGroup.selectedBrand" class="selected-info">
								<view class="info-row">
									<text>已选择品牌：{{brandGroup.selectedBrand}}</text>
									<text
										v-if="brandGroup.selectedBottomCloth">底部：{{brandGroup.selectedBottomCloth}}</text>
								</view>
								<view class="quantity-control">
									<view class="minus" @click="decreaseQuantity('brandQuantity', index)">-</view>
									<input v-model="brandGroup.quantity" type="number" placeholder="数量"></input>
									<view class="plus" @click="increaseQuantity('brandQuantity', index)">+</view>
									<view class="delete" @click="deleteBrandGroup(index)">删除</view>
								</view>
							</view>
						</view>

						<view class="add-array" @click="addBrandGroup">新增品牌数组</view>
					</view>

					<!-- 台球桌调平部分 -->
					<view class="section">
						<text class="section-title">台球桌调平</text>
						<view class="quantity-control">
							<view class="minus" @click="decreaseQuantity('tableLevelingQuantity')">-</view>
							<input v-model="tableLevelingQuantity" type="number" placeholder="数量"></input>
							<view class="plus" @click="increaseQuantity('tableLevelingQuantity')">+</view>
						</view>
					</view>


				</view>

				<!-- 拆装桌球 -->
				<view v-else-if="activeTab === 'disassembleTable'" class="service-content">

					<view class="content-section">
						<!-- 服务详情卡片 -->
						<view class="service-card">
							<view class="service-header">
								<text class="service-title">更换台尼服务</text>
								<text class="service-price" :style="{ color: primaryColor }">¥128起</text>
							</view>
							<image class="service-image" src="/static/chaizhuangzuoqiu/1.avif" mode="aspectFill">
							</image>
							<view class="service-info">
								<text>专业技师上门更换，多种品牌台尼可选</text>
							</view>
						</view>

						<!-- 单装/单拆台球桌部分 -->
						<view class="section-item">
							<text class="section-title">单装/单拆台球桌</text>
							<view class="scroll-view-container">
								<view v-for="(modelGroup, index) in modelGroups" :key="'model'+index"
									class="model-group">
									<view class="model-container">
										<view class="model-selector">
											<text>型号：</text>
											<view class="scroll-container small">
												<picker-view class="picker-view" :indicator-style="indicatorStyle"
													@change="(e)=>bindModelChange(e, index)">
													<picker-view-column>
														<view class="picker-item" v-for="(item,i) in models" :key="i">
															{{item}}
														</view>
													</picker-view-column>
												</picker-view>
											</view>
										</view>
									</view>

									<view v-if="modelGroup.selectedModel" class="selected-info">
										<view class="quantity-control">
											<view class="minus" @click="decreaseQuantity('modelQuantity', index)">-
											</view>
											<input v-model="modelGroup.quantity" type="number" placeholder="数量"></input>
											<view class="plus" @click="increaseQuantity('modelQuantity', index)">+
											</view>
											<view class="delete" @click="deleteModelGroup(index)">删除</view>
										</view>
									</view>
								</view>

								<view class="add-array" @click="addModelGroup">新增型号数组</view>
							</view>
						</view>

						<!-- 台尼品牌选择 -->
						<view class="section-item">
							<text class="section-title">台尼品牌与底部</text>
							<view class="brand-group-container">
								<view v-for="(brandGroup, index) in brandGroups" :key="'brand'+index"
									class="brand-group">
									<view class="brand-container">
										<view class="brand-selector">
											<text>品牌：</text>
											<view class="scroll-container small">
												<picker-view class="picker-view" :indicator-style="indicatorStyle"
													@change="(e)=>bindBrandChange(e, index)">
													<picker-view-column>
														<view class="picker-item" v-for="(item,i) in brands" :key="i">
															{{item}}
														</view>
													</picker-view-column>
												</picker-view>
											</view>
										</view>

										<view class="bottom-cloth-selector" v-if="brandGroup.selectedBrand">
											<text>底部：</text>
											<view class="scroll-container small">
												<picker-view class="picker-view" :indicator-style="indicatorStyle"
													@change="(e)=>bindBottomClothChange(e, index)">
													<picker-view-column>
														<view class="picker-item" v-for="(item,i) in bottomCloths"
															:key="i">{{item}}</view>
													</picker-view-column>
												</picker-view>
											</view>
										</view>
									</view>

									<view v-if="brandGroup.selectedBrand" class="selected-info">
										<view class="quantity-control">
											<view class="minus" @click="decreaseQuantity('brandQuantity', index)">-
											</view>
											<input v-model="brandGroup.quantity" type="number" placeholder="数量"></input>
											<view class="plus" @click="increaseQuantity('brandQuantity', index)">+
											</view>
											<view class="delete" @click="deleteBrandGroup(index)">删除</view>
										</view>
									</view>
								</view>

								<view class="add-array" @click="addBrandGroup">新增品牌数组</view>
							</view>
						</view>

						<!-- 台球桌搬运数量 -->
						<view class="section-item">
							<text class="section-title">台球桌搬运数量</text>
							<view class="quantity-control">
								<view class="minus" @click="decreaseTransportQuantity">-</view>
								<input class="quantity-input" type="number" :value="transportQuantity"
									@input="updateTransportQuantity($event)" />
								<view class="plus" @click="increaseTransportQuantity">+</view>
							</view>
						</view>

						<!-- 上石板数量 -->
						<view class="section-item">
							<text class="section-title">上石板数量</text>
							<view class="quantity-control">
								<view class="minus" @click="decreaseSlateQuantity">-</view>
								<input class="quantity-input" type="number" :value="slateQuantity"
									@input="updateSlateQuantity($event)" />
								<view class="plus" @click="increaseSlateQuantity">+</view>
							</view>
						</view>
					</view>

				</view>

				<!-- 更换配件 -->
				<view v-else-if="activeTab === 'replaceParts'" class="service-content">

					<view class="section">
						<text class="section-title">配件类型和数量</text>

						<!-- 循环渲染多组型号选择 -->
						<view v-for="(modelGroup, index) in modelGroups" :key="'model'+index" class="model-group">
							<view class="model-container">
								<view class="model-selector">
									<text>配件：</text>
									<view class="scroll-container small">
										<picker-view class="picker-view" :indicator-style="indicatorStyle"
											@change="(e)=>bindModelChange(e, index)">
											<picker-view-column>
												<view class="picker-item" v-for="(item,i) in models" :key="i">{{item}}
												</view>
											</picker-view-column>
										</picker-view>
									</view>
								</view>

								<view class="bottom-selector" v-if="modelGroup.selectedModel">
									<text>类型：</text>
									<view class="scroll-container small">
										<picker-view class="picker-view" :indicator-style="indicatorStyle"
											@change="(e)=>bindBottomChange(e, index)">
											<picker-view-column>
												<view class="picker-item" v-for="(item,i) in bottoms" :key="i">{{item}}
												</view>
											</picker-view-column>
										</picker-view>
									</view>
								</view>
							</view>

							<view v-if="modelGroup.selectedModel" class="selected-info">
								<view class="info-row">
									<text>已选择配件：{{modelGroup.selectedModel}}</text>
									<text v-if="modelGroup.selectedBottom">类型：{{modelGroup.selectedBottom}}</text>
								</view>
								<view class="quantity-control">
									<view class="minus" @click="decreaseQuantity('modelQuantity', index)">-</view>
									<input v-model="modelGroup.quantity" type="number" placeholder="数量"></input>
									<view class="plus" @click="increaseQuantity('modelQuantity', index)">+</view>
									<view class="delete" @click="deleteModelGroup(index)">删除</view>
								</view>
							</view>
						</view>

						<view class="add-array" @click="addModelGroup">新增型号数组</view>
					</view>

				</view>

				<!-- 维修球杆 -->
				<view v-else-if="activeTab === 'repairCue'" class="service-content">

					<scroll-view class="vertical-scroll-view" scroll-y style="height: 500rpx;">
						<text class="huan" style="font-weight: bold;">更换球杆皮头种类和数量</text>
						<view class="shuliang" v-for="(item, index) in tableTypes" :key="index">
							<text class="shuliang-name">{{item.name}}</text>
							<view class="quantity-control">
								<view class="minus" @click="decreaseCueQuantity(index)">-</view>
								<input class="quantity-input" type="number" v-model="item.quantity" />
								<view class="plus" @click="increaseCueQuantity(index)">+</view>
							</view>
						</view>
					</scroll-view>

					<view class="repair-way-container white-bg">
						<view class="label">
							<text class="section-title">
								期望维修方式:
							</text>
						</view>
						<view class="repair-way-options">
							<view class="repair-way-option" :class="{ active: selectedRepairWay === '上门维修' }"
								@click="selectRepairWay('上门维修')">
								上门维修
							</view>
							<view class="repair-way-option" :class="{ active: selectedRepairWay === '闪送/快递配送' }"
								@click="selectRepairWay('闪送/快递配送')">
								闪送/快递配送
							</view>
							<view class="repair-way-option" :class="{ active: selectedRepairWay === '送货上门' }"
								@click="selectRepairWay('送货上门')">
								送货上门
							</view>
						</view>
					</view>
				</view>

				<!-- 搬修服务 -->
				<view v-else-if="activeTab === 'moveRepair'" class="service-content">

					<view class="repair-way-container white-bg">
						<view class="label">
							<text class="section-title">搬修服务:</text>
							<view class="repair-way-options">
								<view class="repair-way-option" :class="{ active: selectedService === '桌球搬修' }"
									@click="selectedService = '桌球搬修'">
									桌球搬修
								</view>
								<view class="repair-way-option" :class="{ active: selectedService === '设备搬修' }"
									@click="selectedService = '设备搬修'">
									设备搬修
								</view>
								<view class="repair-way-option" :class="{ active: selectedService === '其他搬修' }"
									@click="selectedService = '其他搬修'">
									其他搬修
								</view>
							</view>
						</view>

						<view class="label">
							<text class="section-title">
								楼层:
							</text>
							<view class="floor">
								<input type="text" placeholder="请输入楼层" v-model="floor" />
							</view>
						</view>

						<view class="repair-way-options">
							<view class="repair-way-option" :class="{ active: selectedRepairWay === '楼梯' }"
								@click="selectRepairWay('楼梯')">
								楼梯
							</view>

							<view class="repair-way-option" :class="{ active: selectedRepairWay === '电梯' }"
								@click="selectRepairWay('电梯')">
								电梯
							</view>
						</view>



						<view class="section-item">
							<text class="section-title">数量</text>
							<view class="quantity-control">
								<view class="minus" @click="decreaseSlateQuantity">-</view>
								<input class="quantity-input" type="number" :value="slateQuantity"
									@input="updateSlateQuantity($event)" />
								<view class="plus" @click="increaseSlateQuantity">+</view>
							</view>
						</view>

					</view>


				</view>

			</view>

			<!-- 预约时间 -->
			<view class="section">
				<text class="section-title">预约时间</text>
				<view class="time-picker">
					<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="picker">
							<text>{{date}}</text>
							<text class="arrow">></text>
						</view>
					</picker>
					<picker mode="time" @change="bindTimeChange">
						<view class="picker">
							<text>{{time}}</text>
							<text class="arrow">></text>
						</view>
					</picker>
				</view>
			</view>

			<!-- 地址信息 -->
			<view class="section">
				<text class="section-title">地址信息</text>
				<view class="address-picker" @click="goToAddressPicker">

					<view v-if="selectedAddress" class="address-info">
						<text class="address-text">{{selectedAddress.fullAddress}}</text>
						<view class="contact-info">
							<text>{{selectedAddress.contactName}}</text>
							<text>{{selectedAddress.phone}}</text>
						</view>
					</view>
					<view v-else class="placeholder">
						<text>请选择地址</text>
					</view>

				</view>
				<view class="address-detail">
					<input type="text" placeholder="请输入详细地址" v-model="addressDetail" />
				</view>
			</view>

			<!-- 添加备注 -->
			<view class="section">
				<text class="section-title">添加备注</text>
				<view class="remark-input">
					<textarea placeholder="请输入备注信息" v-model="remark" auto-height />
				</view>
			</view>

			<!-- 用户出价部分 -->
			<view class="section">
				<text class="section-title">用户出价</text>
				<view class="price-input-container">
					<text class="price-prefix">¥</text>
					<input class="price-input" type="number" placeholder="请填写价格" v-model="userPrice" />
				</view>
				<text class="price-tip">建议价格¥0起</text>
			</view>

			<!-- 立即下单按钮 -->
			<button class="submit-button" @click="submitOrder">立即下单</button>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				models: ['中式台球', '美式台球', '斯诺克', '开伦台球', '俄式台球'],
				brands: ['利百文', '乔氏', '星牌', '英辉', '健伦', '腾勃', '泰尼卡', '6811', '宾士域'],
				bottoms: ['边', '底', '边+底'],
				bottomCloths: ['522/底', '522/底+边', '566/底', '566/底+边'],
				modelGroups: [{
					selectedModel: '',
					selectedBottom: '',
					quantity: 1
				}],
				brandGroups: [{
					selectedBrand: '',
					selectedBottomCloth: '',
					quantity: 1
				}],
				tableLevelingQuantity: 0, //调平数
				userPrice: '',
				indicatorStyle: `height: 50px;`,
				region: [], // 地区数组
				selectedAddress: null, // 地址
				addressDetail: '',
				remark: '', // 备注
				date: '2025-4-1',
				time: '12:01',
				primaryColor: '#fdad18', // 颜色
				activeTab: 'replaceCloth',
				// activeTab === 'maintain',
				// activeTab === 'replacePart',
				// activeTab === 'fix',
				// activeTab === 'move'
				tableTypes: [{
						name: '牛皮头',
						quantity: 0
					},
					{
						name: '多层复合皮头',
						quantity: 0
					},
					{
						name: '酚醛树脂皮头',
						quantity: 0
					},
					{
						name: '碳纤维皮头',
						quantity: 0
					},
					{
						name: '控制型皮头',
						quantity: 0
					},
					{
						name: '力量型皮头',
						quantity: 0
					},
					{
						name: '通用型皮头',
						quantity: 0
					},
				],
				userPrice: '',
				selectedRepairWay: '上门维修', // 初始化维修方式
				floor: '', // 楼层
				slateQuantity: 0, // 石板数量
				transportQuantity: 0,
				selectedRepairWay: '', // 选择的维修方式
				selectedTransportWay: '', // 选择的运输方式
				selectedService: '', // 搬修服务选择状态
				dynamicTitle: "更换台尼", // 服务标题
				dynamicAddressId: null, // 最终选的地址 ID
				addressList: [],
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 导航
			goToReplaceTableCloth() {
				uni.navigateTo({
					url: '/pages/category/taini/index'
				});
			},
			goToDisassembleTable() {
				uni.navigateTo({
					url: '/pages/category/table/index'
				});
			},
			goToReplaceParts() {
				uni.navigateTo({
					url: '/pages/category/peijian/index'
				});
			},
			goToRepairCue() {
				uni.navigateTo({
					url: '/pages/category/qiugan/index'
				});
			},
			goToMoveAndRepair() {
				uni.navigateTo({
					url: '/pages/category/banxiu/index'
				});
			},


			// 石板数量增加
			increaseSlateQuantity() {
				this.slateQuantity += 1
				console.log('增加后数量:', this.slateQuantity)
			},

			// 石板数量减少
			decreaseSlateQuantity() {
				if (this.slateQuantity > 0) {
					this.slateQuantity -= 1
					console.log('减少后数量:', this.slateQuantity)
				}
			},

			// 更新石板数量
			updateSlateQuantity(event) {
				const value = parseInt(event.target.value) || 0
				this.slateQuantity = value
			},

			// 台球桌搬运数量控制
			increaseTransportQuantity() {
				this.transportQuantity++;
			},
			decreaseTransportQuantity() {
				if (this.transportQuantity > 0) {
					this.transportQuantity--;
				}
			},
			updateTransportQuantity(event) {
				const value = parseInt(event.target.value) || 0;
				this.transportQuantity = value;
			},


			// 增加球杆皮头数量
			increaseCueQuantity(index) {
				this.tableTypes[index].quantity++;
			},

			// 减少球杆皮头数量
			decreaseCueQuantity(index) {
				if (this.tableTypes[index].quantity > 0) {
					this.tableTypes[index].quantity--;
				}
			},
			// 选择维修方式
			selectRepairWay(way) {
				this.selectedRepairWay = way
			},

			// 选择运输方式
			selectTransportWay(way) {
				this.selectedTransportWay = way
			},

			
			// switchService(serviceType) {
			// 	this.currentService = serviceType;
			// },




			// 型号相关方法
			bindModelChange(e, index) {
				const val = e.detail.value;
				this.modelGroups[index].selectedModel = this.models[val[0]];
			},
			bindBottomChange(e, index) {
				const val = e.detail.value;
				this.modelGroups[index].selectedBottom = this.bottoms[val[0]];
			},
			addModelGroup() {
				this.modelGroups.push({
					selectedModel: '',
					selectedBottom: '',
					quantity: 1
				});
			},
			deleteModelGroup(index) {
				this.modelGroups.splice(index, 1);
			},

			// 品牌
			bindBrandChange(e, index) {
				const val = e.detail.value;
				this.brandGroups[index].selectedBrand = this.brands[val[0]];
			},
			bindBottomClothChange(e, index) {
				const val = e.detail.value;
				this.brandGroups[index].selectedBottomCloth = this.bottomCloths[val[0]];
			},
			addBrandGroup() {
				this.brandGroups.push({
					selectedBrand: '',
					selectedBottomCloth: '',
					quantity: 1
				});
			},
			deleteBrandGroup(index) {
				this.brandGroups.splice(index, 1);
			},

			// 数量控制
			increaseQuantity(type, index) {
				if (type === 'modelQuantity') {
					this.modelGroups[index].quantity++;
				} else if (type === 'brandQuantity') {
					this.brandGroups[index].quantity++;
				} else if (type === 'tableLevelingQuantity') {
					this.tableLevelingQuantity++;
				}
			},
			decreaseQuantity(type, index) {
				if (type === 'modelQuantity' && this.modelGroups[index].quantity > 0) {
					this.modelGroups[index].quantity--;
				} else if (type === 'brandQuantity' && this.brandGroups[index].quantity > 0) {
					this.brandGroups[index].quantity--;
				} else if (type === 'tableLevelingQuantity' && this.tableLevelingQuantity > 0) {
					this.tableLevelingQuantity--;
				}
			},

			// 时间选择
			bindTimeChange(e) {
				this.time = e.detail.value;
			},

			// 地区选择
			bindRegionChange(e) {
				this.region = e.detail.value;
			},



			// 设置选中地址的方法
			setSelectedAddress(address) {
				this.selectedAddress = address;
				if (address) {
					this.addressDetail = address.detailAddress;
				}
			},

			goToAddressPicker() {
				uni.navigateTo({
					url: '/pages/my/address/index?select=true',
					events: {
						acceptAddress: (data) => {
							this.selectedAddress = data;
							this.addressDetail = data.detailAddress;
							this.dynamicAddressId = data.id;
						}
					},
					success: (res) => {
						if (this.selectedAddress) {
							res.eventChannel.emit('sendAddress', this.selectedAddress);
						}
					}
				});
			},

			selectAddress(item) {
				if (this.isSelectMode) {
					try {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('acceptAddress', {
							id: item.id,
							fullAddress: `${item.province}${item.city}${item.district}${item.detail}`,
							detailAddress: item.detail,
							contactName: item.name,
							phone: item.phone
						});
						uni.navigateBack();
					} catch (error) {
						console.error('地址选择失败:', error);
					}
				} else {
					uni.setStorageSync('selectedAddress', item);
				}
			},

			// 日期选择
			bindDateChange(e) {
				this.date = e.detail.value;
			},

			// 获取日期范围
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			handleServiceSelect(service) {
				this.dynamicTitle = service.title;

			},

			openAddressSelector() {
				const selectedAddress = this.addressList[0];
				this.dynamicAddressId = selectedAddress.id;
			},
			
			switchService(tab){
				this.activeTab = tab;
				switch(tab){
					case 'replaceCloth':
						this.dynamicTitle = '更换台尼';
						break;
					case 'disassembleTable':
						this.dynamicTitle = '拆装球桌';
						break;
					case 'replaceParts':
						this.dynamicTitle = '更换配件';
						break;
					case 'repairCue':
						this.dynamicTitle = '维修球杆';
						break;
					case 'moveRepair':
						this.dynamicTitle = '搬修服务';
						break;
				}
			},

			

			submitOrder() {
				const token = uni.getStorageSync('token');
				let orderData = {
					title: this.dynamicTitle,
					address_id: this.dynamicAddressId,
					expected_time: `${this.date} ${this.time}:00`,
					user_price: this.userPrice,
					remark: this.remark
				};

				switch (this.activeTab) {
					case 'replaceCloth':
						orderData.model_and_bottom = this.modelGroups
							.filter(item => item.selectedModel)
							.map(item => ({
								型号: item.selectedModel,
								底部: item.selectedBottom,
								数量: item.quantity
							}));
						orderData.brand_and_bottom = this.brandGroups
							.filter(item => item.selectedBrand)
							.map(item => ({
								品牌: item.selectedBrand,
								底部: item.selectedBottomCloth,
								数量: item.quantity
							}));
						orderData.level = this.tableLevelingQuantity;
						break;

					case 'disassembleTable':
						orderData.single_or_disassemble = this.modelGroups
							.filter(item => item.selectedModel && item.quantity > 0)
							.reduce((acc, item) => {
								acc[item.selectedModel] = item.quantity;
								return acc;
							}, {});
						orderData.brand = this.brandGroups
							.filter(item => item.selectedBrand && item.quantity > 0)
							.map(item => ({
								[item.selectedBrand]: item.quantity.toString()
							}));
						orderData.transport_count = this.transportQuantity;
						orderData.stone_count = this.slateQuantity;
						break;

					case 'replaceParts':
						orderData.parts_and_quantity = this.modelGroups
							.filter(item => item.selectedModel)
							.map(item => ({
								配件: item.selectedModel,
								类型: item.selectedBottom,
								数量: item.quantity
							}));
						break;

					case 'repairCue':
						orderData.tip_and_quantity = this.tableTypes
							.filter(item => item.quantity > 0)
							.reduce((acc, item) => {
								acc[item.name] = item.quantity;
								return acc;
							}, {});
						orderData.method = this.selectedRepairWay;
						break;

					case 'moveRepair':
						orderData.mover_service = this.selectedService;
						orderData.floor = [{
								"楼层": parseInt(this.floor) || 0
							},
							{
								"方式": this.selectedRepairWay
							},
							{
								"数量": this.slateQuantity.toString()
							}
						];
						break;
				}

				this.submitToServer(orderData);
			},
			submitToServer(orderData) {
				this.token = uni.getStorageSync('token');
				this.$http.post("https://billiards.cqtrust.cn/orders", orderData)
					.then(res => {
						if (res.code === 1 || res.code === 200) {
							uni.navigateBack();
						}
					})
					.catch(err => console.error(err));
			}

		},
		onLoad() {

			this.$http.post(this.$api.login.url, {
					"nickname": "荣梦丹",
					"avatar": "https://example.com/avatar.jpg"
				})
				.then((res) => {
					console.log(res);
					uni.setStorageSync('token', res.data.token); //写入token
					console.log(res.data.user.nickname);
				})

			this.$http.get("https://billiards.cqtrust.cn/users", {}).then((res) => {
				console.log(res);
			})
			// 先从本地获取token
			this.token = uni.getStorageSync('token');
		},
		onShow() {
			const app = getApp();
			if (app.globalData.selectedAddress) {
				const address = app.globalData.selectedAddress;
				this.region = [address.province, address.city, address.district];
				this.addressDetail = address.detail;
				// 清除全局存储的地址
				app.globalData.selectedAddress = null;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.fangkuang {
		background: white;
		width: 97.6%;
		height: 150rpx;
		border-radius: 16rpx;
		padding: 10rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin: 0 auto;
	}

	.fangkuang2 {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin: 12rpx auto;
	}

	.function-bar {
		display: flex;
		justify-content: center;
		padding: 10rpx 0;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}

	.function-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 120rpx;
		padding: 0 10rpx;
		font-size: 26rpx;
	}

	.function-item image {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 10rpx;
	}

	.section {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section:last-child {
		border-bottom: none;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
		display: block;
		padding-left: 10rpx;
		border-left: 6rpx solid #fdad18;
	}

	.model-group,
	.brand-group {
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx dashed #e0e0e0;
	}

	.model-group:last-child,
	.brand-group:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.model-container,
	.brand-container {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.model-selector,
	.brand-selector,
	.bottom-selector,
	.bottom-cloth-selector {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.scroll-container {
		height: 150rpx;
		margin: 10rpx 0;
		flex: 1;
	}

	.scroll-container.small {
		height: 120rpx;
	}

	.picker-view {
		width: 100%;
		height: 100%;
	}

	.picker-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
	}

	.selected-info {
		margin-top: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-top: 15rpx;
	}

	.minus,
	.plus {
		padding: 10rpx 24rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.delete {
		color: #ff4d4f;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	input {
		width: 100rpx;
		text-align: center;
		border: 1rpx solid #e0e0e0;
		padding: 10rpx;
		border-radius: 8rpx;
	}

	.add-array {
		color: #fdad18;
		text-align: center;
		margin-top: 20rpx;
		font-size: 28rpx;
		display: block;
		padding: 10rpx;
		border: 1rpx dashed #fdad18;
		border-radius: 8rpx;
		background: none;
	}

	/* 选择器样式 */
	.time-picker,
	.address-picker {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.picker:last-child {
		border-bottom: none;
	}

	.arrow {
		color: #999;
	}

	.address-detail {
		margin-top: 15rpx;
	}

	.address-detail input {
		width: 95%;
		padding: 15rpx;
		background-color: #fff;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
	}

	.address-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.contact-info {
		display: flex;
		gap: 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.placeholder {
		flex: 1;
		color: #999;
	}

	/* 备注输入框样式 */
	.remark-input {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.remark-input textarea {
		width: 100%;
		min-height: 100rpx;
		font-size: 28rpx;
	}


	.price-input-container {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	}

	.price-prefix {
		font-size: 32rpx;
		font-weight: bold;
		color: #fdad18;
	}

	.price-input {
		flex: 1;
		font-size: 32rpx;
		color: #333;
		border: none;
		background: transparent;
		padding: 0 10rpx;
	}

	.price-tip {
		display: block;
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
	}


	.submit-button {
		width: 100%;
		padding: 24rpx;
		background: #fdad18;
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	/* 桌球 */
	.content-section {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin: 12rpx auto;
	}

	.service-card {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 20rpx;
		background-color: #f8f8f8;
	}

	.service-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.service-price {
		font-size: 28rpx;
		font-weight: bold;
	}

	.service-image {
		width: 100%;
		height: 200rpx;
		object-fit: contain;
	}

	.service-info {
		padding: 15rpx 20rpx;
		font-size: 26rpx;
		color: #666;
	}

	.section-item {
		margin-bottom: 30rpx;
	}

	.section-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #fdad18;
	}

	.scroll-view-container {
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 15rpx;
	}

	.model-group,
	.brand-group {
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx dashed #e0e0e0;
	}

	.model-group:last-child,
	.brand-group:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.model-container,
	.brand-container {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.model-selector,
	.brand-selector,
	.bottom-cloth-selector {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.scroll-container {
		height: 150rpx;
		margin: 10rpx 0;
		flex: 1;
	}

	.scroll-container.small {
		height: 120rpx;
	}

	.picker-view {
		width: 100%;
		height: 100%;
	}

	.picker-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
	}

	.selected-info {
		margin-top: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.minus,
	.plus {
		padding: 10rpx 24rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.delete {
		color: #ff4d4f;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	input {
		width: 100rpx;
		text-align: center;
		border: 1rpx solid #e0e0e0;
		padding: 10rpx;
		border-radius: 8rpx;
	}

	.add-array {
		color: #fdad18;
		text-align: center;
		margin-top: 20rpx;
		font-size: 28rpx;
		display: block;
		padding: 10rpx;
		border: 1rpx dashed #fdad18;
		border-radius: 8rpx;
		background: none;
	}

	.time-picker,
	.address-picker {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.picker:last-child {
		border-bottom: none;
	}

	.arrow {
		color: #999;
	}

	.address-detail {
		margin-top: 15rpx;
	}

	.address-detail input {
		width: 95%;
		padding: 15rpx;
		background-color: #fff;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
	}

	.remark-input {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.remark-input textarea {
		width: 100%;
		min-height: 100rpx;
		font-size: 28rpx;
	}

	/* 配件 */
	.section {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section:last-child {
		border-bottom: none;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
		display: block;
		padding-left: 10rpx;
		border-left: 6rpx solid #fdad18;
	}

	.model-group {
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx dashed #e0e0e0;
	}

	.model-group:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.model-container {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.model-selector,
	.bottom-selector,
	{
	display: flex;
	align-items: center;
	gap: 10rpx;
	}

	.scroll-container {
		height: 150rpx;
		margin: 10rpx 0;
		flex: 1;
	}

	.scroll-container.small {
		height: 120rpx;
	}

	.picker-view {
		width: 100%;
		height: 100%;
	}

	.picker-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
	}

	.selected-info {
		margin-top: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-top: 15rpx;
	}

	.minus,
	.plus {
		padding: 10rpx 24rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.delete {
		color: #ff4d4f;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	input {
		width: 100rpx;
		text-align: center;
		border: 1rpx solid #e0e0e0;
		padding: 10rpx;
		border-radius: 8rpx;
	}

	.add-array {
		color: #fdad18;
		text-align: center;
		margin-top: 20rpx;
		font-size: 28rpx;
		display: block;
		padding: 10rpx;
		border: 1rpx dashed #fdad18;
		border-radius: 8rpx;
		background: none;
	}

	/* 球杆 */
	.vertical-scroll-view {
		height: 500rpx;
	}

	.shuliang {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.minus,
	.plus {
		padding: 10rpx 24rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.quantity-input {
		width: 100rpx;
		text-align: center;

		border: 1rpx solid #e0e0e0;
		padding: 10rpx;
		border-radius: 8rpx;
	}

	/* 搬修 */
	.vertical-scroll-view {
		height: 500rpx;
	}

	.shuliang {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.shuliang-name {
		font-size: 28rpx;
		color: #333;
	}

	.quantity-control {
		display: flex;
		align-items: center;
	}

	.quantity-control .quantity-btn {
		width: 50rpx;
		height: 50rpx;
		background-color: #f0f0f0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}

	.quantity-control .quantity-btn:active {
		background-color: #ffe9cc;
	}

	.quantity-control .quantity-input {
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 10rpx;
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
	}

	.repair-way-container {
		margin-top: 20rpx;
	}

	.label {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.repair-way-options {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.repair-way-option {
		padding: 14rpx 25rpx;
		border: 1rpx solid #ccc;
		border-radius: 9rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
		color: #666;
		cursor: pointer;
	}

	.repair-way-option.active {
		border-color: #fdad18;
		color: #fdad18;
		background-color: #ffe9cc;

	}

	.floor {
		margin-top: 15rpx;
	}

	.floor input {
		width: 95%;
		padding: 15rpx;
		background-color: #fff;
		color: #999;

	}



	.address-detail {
		margin-top: 15rpx;
	}

	.address-detail input {
		width: 95%;
		padding: 15rpx;
		background-color: #fff;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
	}

	/* 备注输入框样式 */
	.remark-input {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.remark-input textarea {
		width: 100%;
		min-height: 100rpx;
		font-size: 28rpx;
	}
</style>